<template>
	<view class="container">
		<u-form
			:model="receipt_pics_model"
			ref="uForm"
			label-position='left'
			label-width='200rpx'
		>
			<view class="form_item_box">
				<view class="title_box">
					<text class="title">商家发货图</text>
					
				</view>
				<u-form-item
					label-position='top'
					:border-bottom='false'
					label-width="400rpx"
				>
					<view
						class="images_list_box"
						v-if="delivery_pics_model.photoList.length"
					>
						<image
							class="image"
							mode="aspectFill"
							v-for="(item, index) in delivery_pics_model.photoList"
							:key="index"
							:src="item"
							@click="previewImg(delivery_pics_model.photoList, index)"
						></image>
					</view>
					<view class="" v-else>暂无图片</view>
				</u-form-item>
				<view class="desc">出库时间：{{delivery_pics_model.createTime | timeFormat}}</view>
			</view>
			<view class="form_item_box">
				<view class="title_box">
					<text class="title">用户签收图</text>
					
				</view>
				<u-form-item
					label-position='top'
					:border-bottom='false'
					label-width="400rpx"
				>
					<view class="images_list_box" v-if="receipt_pics_model.createTime">
						<image
							class="image"
							mode="aspectFill"
							v-for="(item, index) in receipt_pics_model.photoList"
							:key="index"
							:src="item.url"
							@click="previewImg(receipt_pics_model.photoList, index)"
						></image>
					</view>
					<view class="upload_box" v-else>
						<u-upload
						  :fileList="receipt_pics_model.photoList"
						  @afterRead="afterRead"
						  @delete="deletePic"
						  name="1"
						  width='200rpx'
						  height="200rpx"
						  multiple
						  :maxCount="5"
						  :previewFullImage="true"
						>
							<view class="upload_icon">
								<u-icon name="plus" size="30"></u-icon>
								<text>上传图片</text>
							</view>
						</u-upload>
					</view>
				</u-form-item>
				<text>签收时间：{{receipt_pics_model.createTime | timeFormat}}</text>
			</view>
			<view class="form_item_box">
				<view class="title_box">
					<text class="title">商家验收图</text>
					
				</view>
				<u-form-item
					label-position='top'
					:border-bottom='false'
					label-width="400rpx"
				>
					<view
						class="images_list_box"
						v-if="approval_pics_model.photoList.length"
					>
						<image
							class="image"
							v-for="(item, index) in approval_pics_model.photoList"
							:key="index"
							:src="item"
							@click="previewImg(approval_pics_model.photoList, index)"
						></image>
					</view>
					<view class="" v-else>暂无图片</view>
				</u-form-item>
				<text>验收时间：{{approval_pics_model.createTime | timeFormat}}</text>
			</view>
			<view class="button_box">
				<button @click="submit" class="customStyle">确认提交</button>
			</view>
		</u-form>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				order_id: '',
				delivery_pics_model: {	// 商家发货图
					createTime: '',
					photoList: [],
				},
				receipt_pics_model: {	// 用户签收图
					createTime: '',
					photoList: [],
				},
				approval_pics_model: {	// 商家验收图
					createTime: '',
					photoList: [],
				}
			}
		},
		onLoad (options) {
			this.order_id = options.order_id;
			this.getOrderDetail();
		},
		filters: {
			timeFormat (val) {
				if (!val) return '';
				return uni.$u.timeFormat(val, 'yyyy-mm-dd hh:MM:ss')
			}
		},
		methods: {
			// 获取订单详情
			getOrderDetail () {
				let params = {
					order_id: this.order_id,
					pay_source: this.getPlatform()
				}
				this._get('/user.order/detail', params, (res) => {
					
					let orgProof = res.data.order.order_proof;
					if (!orgProof.length) return;
					let proof = orgProof[0];
					if (proof.delivery_pics) {
						let photoArr = proof.delivery_pics.split(',');
						this.delivery_pics_model.photoList = photoArr;
						this.delivery_pics_model.createTime = proof.create_time;
					}
					if (proof.receipt_pics) {
						let photoArr = proof.receipt_pics.split(',');
						photoArr.forEach((item) => {
							this.receipt_pics_model.photoList.push({
								uploadedUrl: item,
								url: item
							})
						})
						this.receipt_pics_model.createTime = proof.receipt_time;
					}
					if (proof.approval_pics) {
						let photoArr = proof.approval_pics.split(',');
						this.approval_pics_model.photoList = photoArr;
						this.approval_pics_model.createTime = proof.approval_time;
					}
				})
			},
			// 选择图片读取后的回调
			async afterRead(event) {
				let lists = [].concat(event.file);
				let fileListLen = this.receipt_pics_model.photoList.length;
				lists.map((item) => {
					this.receipt_pics_model.photoList.push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				this.uploadHander(event);
			},
			// 删除图片
			deletePic (event) {
			  this.receipt_pics_model.photoList.splice(event.index, 1);
			},
			// 上传图片
			async uploadFilePromise (options) {
				 return new Promise((resolve, reject) => {
				    uni.uploadFile({
				    	...options,
				    	success: (res) => {
							resolve(res);
				    	},
				    	fail: (err) => {
							reject(err);
						}
				    });
				});
			},
			async uploadHander (event) {
				let params = {
					token: uni.getStorageSync('token'),
					app_id: this.getAppId()
				};
				for (let i = 0; i < this.receipt_pics_model.photoList.length; i++) {
					if (this.receipt_pics_model.photoList[i].uploadedUrl) continue; // 如果uploadedUrl属性有值，则已传
					let res = await this.uploadFilePromise({
						url: this.websiteUrl + '/index.php?s=/api/file.upload/image',
						filePath: this.receipt_pics_model.photoList[i].url,
						name: 'iFile',
						formData: params,
					})
					this.receipt_pics_model.photoList[i].status = 'success';
					this.receipt_pics_model.photoList[i].message = '上传成功';
					let result = typeof res.data === 'object' ? res.data : JSON.parse(res.data);
					if (result.code === 1) {
						this.receipt_pics_model.photoList[i].uploadedUrl = result.data.file_path;
					}
				}
			},
			async submit () {
				let [err, succ] = await uni.showModal({
					title: '提示',
					content: '确认要提交吗？',
					confirmText: '确定'
				});
				if (err || succ.cancel) return;
				let imgString = '';
				let imgArr = this.receipt_pics_model.photoList;
				if (imgArr.length) {
				  let pathArr = imgArr.map(item => item.uploadedUrl);
				  imgString = pathArr.join(',');
				}
				let params = {
					token: uni.getStorageSync('token'),
					app_id: this.getAppId(),
					order_id: this.order_id,
					pics: imgString
				}
				this._post('user.order/addOrderProof', params, (res) => {
					this.receipt_pics_model.photoList = [];
					setTimeout(() => {
						uni.navigateBack();
					}, 600)
				})
			},
			// 预览图片
			previewImg (arrlist, index) {
				let imgArr = []
				arrlist.forEach((item) => {
					if (item.url) {
						imgArr.push(item.url)
					} else {
						imgArr.push(item)
					}
				})
				uni.previewImage({
					indicator:"number",
					loop: true,
					urls: imgArr,
					current: index
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		padding-bottom: 250rpx;
		
		.form_item_box{
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 16rpx;
			padding: 20rpx;
			
			.title_box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-left: 8rpx solid #11a0ae;
				padding-left: 10rpx;
				
				.title{
					font-size: 26rpx;
					font-weight: bold;
				}
				.desc{
					
				}
			}
			.images_list_box{
				display: flex;
				flex-wrap: wrap;
					
				.image{
					width: 200rpx;
					height: 200rpx;
					margin: 8rpx;
					margin-bottom: 0;
					border-radius: 10rpx;
				}
			}
		}
		.upload_box{
			
			.upload_icon{
				width: 200rpx;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #efefef;
				color: #b0b0b0;
				border-radius: 10rpx;
				
				text{
					padding-top: 10rpx;
				}
			}
		}
		.button_box{
			width: 100%;
			position: fixed;
			z-index: 999;
			left: 0;
			bottom: 0;
			background-color: #fff;
			padding: 30rpx 0 80rpx 0;
			display: flex;
			justify-content: center;
			
			.customStyle {
				width: 90%;
				background-color: #11a0ae;
				color: #fff;
				border: none;
				border-radius: 10rpx;
			}
		}
	}
</style>